<template>
    <div>
        <ul>
            <li class="commment" v-for="(info,index) in infos" :key="index">
               <div class="heading">
                <span><img :src="info.user_img"></span>
                <span>{{info.user_name}}</span>
                <span>{{info.date | date('yyyy-MM-dd hh:mm:ss')}}</span>
               </div>
                <div class="item">
                    <div>{{info.content}}</div>
                    <div> <button class="btn btn-danger" @click="del(info)">删除</button> </div>
                </div>
                   

              
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name:'comment',
    data(){
        return{
            infos:[]
        }
    },
    methods:{
        del(info){
             this.$axios.get(    
                '/delcomment.do?comment_id='+info.comment_id
                +'&user_id='+info.user_id
                ).then(response=>{
                this.infos = response.data;

                this.$router.go(0)
            })

        }
    },
    mounted(){

           this.id= window.localStorage.getItem("uid");
            this.$axios.get('/commentList.do?user_id='+this.id).then(response=>{
            this.infos = response.data ;
         console.log(this.infos+"列表");
       }).catch(function(error){
             console.log(error);
         })
    }
}
</script>

<style scoped>
.commment{
    list-style: none;
    width: 100%;
    background-color: #f8f7f5;
    border-bottom: 1px solid #ccc;
    padding-top: 20px;
    padding-bottom: 20px;
}
.heading{
    display: flex;

    padding-bottom: 10px;
}
.heading span:nth-child(1){
    width: 10%;
}
.heading span:nth-child(1) img{
    width: 50px;
    border-radius: 50%;
}
.heading span:nth-child(2){
    width: 20%;
    text-align: left;
    line-height: 50px;
    font-size: 20px;
}
.heading span:nth-child(3){
    width: 70%;
    text-align: right;
    padding-right: 50px;
    font-size: 15px;
}
.item{
    display: flex;
}
.item div:nth-child(1){
    width: 80%  ;

    padding-left: 100px;
    text-align: left;
    font-size: 20px;
}
.item div:nth-child(2){
    width: 20%;

}
</style>